
<template>
 <h3>数组变化侦测</h3>
 <button @click="addData">添加数据(方法变更)</button>
 <ul>
  <li v-for="(item,index) of names" :key="index">{{ item }}</li>
  <p>-------------------------------------</p>
  <button @click="addData2">添加数据(替换数组)</button>
  <li v-for="(item,index) of names2" :key="index">{{ item }}</li>
 </ul>
</template>

<script>
export default {
  data(){ 
    return {
      names: ["张三", "李四", "王五"],
      names2: ["张三", "李四", "王五"],
      names3:[1,2,3,4,5]
    }
  },
  methods: {
    //方法变更
    // push()
    // pop()
    // shift()
    // unshift()
    // splice()
    // sort()
    // reverse()
    addData() { 
      this.names.push("赵六")
      console.log(this.names)
    },
    //替换数组
    // filter()
    // concat()
    // slice()
    addData2() { 
      this.names2 = this.names2.concat(this.names3)
      console.log(this.names2)
    }
  }
}
</script>